<!--
 * @FileDescription 毫欧表
 * @Author lz
 * @Date 20230529 13:15:11
 * @LastEditors lz
 * @LastEditTime 20230529 13:15:11
-->
<template>
  <div class="mul_box" v-drag.offset.clamp drag-trigger>
    <img
      src="/public/images/主界面-仪表_slices/毫欧表橙色按钮.png"
      @click="zero"
      style="width: 65px; position: absolute; top: 263px; right: 176px"
    />
    <img
      src="/public/images/主界面-仪表_slices/毫欧表旋钮.png"
      class="knob"
      @click="rotate"
    />
    <img
      src="/public/images/主界面-仪表_slices/豪欧表-红灯.png"
      v-if="isOpen"
      style="position: absolute; top: 227px; left: 383px"
    />
    <span class="digitalReadout">{{
      HomeContent.Default.MilliohmmeterData.value.Value
    }}</span>
    <span
      style="color: black; position: absolute; top: 157px; left: 302px; font-weight: 700"
      >{{ HomeContent.Default.MilliohmmeterData.value.Unit }}</span
    >
    <div class="gray" v-if="!isOpen" drag-trigger></div>
    <!-- 和毫欧表连接的红黑表笔ui -->
    <img
      src="/public/images/主界面-仪表_slices/毫欧表-红线.png"
      style="position: absolute; width: 96px; left: 218px; top: 300px"
    />
    <img
      src="/public/images/主界面-仪表_slices/毫欧表-黑线.png"
      style="position: absolute; width: 96px; left: 93px; top: 299px"
    />
    <!-- 红黑表笔操作 -->
    <div class="StylusBox">
      <img
        src="/images/电压表笔-黑-select.png"
        alt=""
        class="Blackwatchpen"
        v-if="
          HomeContent.Default.MilliohmmeterData.value.BlackPenLink == '' &&
          HomeContent.Default.MilliohmmeterData.value.BlackPenSelect
        "
        @click="ClickPenBlack(1)"
      />
      <img
        src="/images/电压表笔-黑-normal.png"
        alt=""
        class="Blackwatchpen nor"
        v-if="
          HomeContent.Default.MilliohmmeterData.value.BlackPenLink == '' &&
          HomeContent.Default.MilliohmmeterData.value.BlackPenSelect == false
        "
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-select.png"
        alt=""
        class="Redwatchpen"
        v-if="
          HomeContent.Default.MilliohmmeterData.value.RedPenLink == '' &&
          HomeContent.Default.MilliohmmeterData.value.RedPenSelect
        "
        @click="ClickPenRed(1)"
      />
      <img
        src="/images/电压表笔-红-normal.png"
        alt=""
        class="Redwatchpen nor"
        v-if="
          HomeContent.Default.MilliohmmeterData.value.RedPenLink == '' &&
          HomeContent.Default.MilliohmmeterData.value.RedPenSelect == false
        "
        @click="ClickPenRed(2)"
      />
      <img
        src="/images/电压表笔-黑-null.png"
        class="Blackwatchpen"
        v-if="HomeContent.Default.MilliohmmeterData.value.BlackPenLink != ''"
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-null.png"
        class="Redwatchpen"
        v-if="HomeContent.Default.MilliohmmeterData.value.RedPenLink != ''"
        @click="ClickPenRed(2)"
      />
    </div>
    <div class="operateTab T3">
      <img src="/images/ic_放回.png" class="ico_1" />
      <span class="tabTxt" @click="OpenMul">放回</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "../../../../runtime/generate/message/ClientMessage";
import WebSocketComponent from "../../../../runtime/module/WebSocket/WebSocketComponent";
import { ref, onMounted, reactive } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const state = reactive({
  redType: false,
  blackType: false,
});
function ClickPenBlack(val: number) {
  state.blackType = !state.blackType;
  if (state.blackType) {
    state.redType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_BLACKPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_BLACKPEN_SELECT
      )
    );
  }
}
function ClickPenRed(val: number) {
  state.redType = !state.redType;
  if (state.redType) {
    state.blackType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_REDPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_REDPEN_SELECT
      )
    );
  }
}
// ============================================================
const isOpen = ref(false);
function zero() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_ABUTMENT
    )
  );
  HomeContent.Default.MilliohmmeterData.value.Value = 0.0;
}
//放回
function OpenMul() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_CLOSE
    )
  );
  HomeContent.Default.MilliohmmeterType.value = false;
}
const angle = ref(0);
const angleVal = ref("-20deg");
async function rotate() {
  //换挡
  console.log("点击了换挡");

  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.INTERNALRESISTANCE_GEARS
    )
  );
  HomeContent.Default.MilliohmmeterData.value = JSON.parse(newArr.Content).Result;
  console.log(
    "JSON.parse(newArr.Content).Result---换挡",
    JSON.parse(newArr.Content).Result
  );
  if (JSON.parse(newArr.Content).Result.Gear == 1) {
    isOpen.value = true;
    angle.value = 0.5;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 2) {
    angle.value = 21;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 3) {
    angle.value = 41;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 4) {
    angle.value = 60;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 5) {
    angle.value = 80;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 6) {
    angle.value = 100;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 0) {
    isOpen.value = false;
    angle.value = -20;
    angleVal.value = angle.value + "deg";
  }
}
onMounted(async function () {});
</script>

<style scoped>
.mul_box {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 609px;
  height: 372px;
  background-image: url("/public/images/主界面-仪表_slices/豪欧表.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.digitalReadout {
  font-family: "DS-DIGI-1";
  position: absolute;
  top: 60px;
  left: 89px;
  color: #000000;
  font-size: 130px;
}
.unit {
  color: #000000;
  position: absolute;
  top: 244px;
  right: 41px;
}
.gray {
  background-color: #737b6d;
  width: 247px;
  height: 172px;
  position: absolute;
  top: 76px;
  left: 80px;
  border-radius: 4px;
}
.Gear {
  display: inline-block;
  position: absolute;
  top: 216px;
  left: 90px;
  color: black;
  font-size: 25px;
  font-family: "DS-DIGI-1";
}
.Mark {
  display: inline-block;
  position: absolute;
  top: 173px;
  /* left: 187px; */
  left: 174px;
  color: black;
  font-size: 40px;
  font-family: "DS-DIGI-1";
  width: 85px;
  text-align: center;
}
.volt {
  color: #000000;
  font-size: 20px;
  font-family: none;
  margin-left: 1px;
}
.Unit {
  display: inline-block;
  position: absolute;
  top: 234px;
  left: 347px;
  color: black;
  font-size: 13px;
  font-weight: 500;
}
.Value {
  display: inline-block;
  position: absolute;
  top: 197px;
  left: 200px;
  color: black;
  font-size: 70px;
  font-family: "DS-DIGI-1";
}
.Time {
  display: inline-block;
  position: absolute;
  top: 237px;
  left: 88px;
  color: black;
  font-size: 35px;
  font-family: "DS-DIGI-1";
}
.noFlicker {
  position: absolute;
  top: 215px;
  /* left: 168px; */
  left: 160px;
  width: 17px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.isFlicker {
  position: absolute;
  top: 215px;
  left: 168px;
  width: 17px;
  opacity: 0;
}

.operateTab {
  width: 92px;
  height: 34px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.9;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}

.tabTxt {
  font-size: 16px;
  color: #fff;
}

.tabTxt:hover {
  color: #a2f95e;
}

.ico_1 {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: 5px;
  margin-right: 5px;
}
.T3 {
  position: absolute;
  right: -100px;
  bottom: 0px;
}
.knob {
  width: 147px;
  position: absolute;
  top: 64px;
  left: 377px;
  transform: rotate(v-bind(angleVal));
}
.StylusBox {
  width: 100px;
  height: 300px;
  position: absolute;
  right: -110px;
  top: 40px;
}

.Blackwatchpen {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 292px;
}

.Redwatchpen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 292px;
}

.nor {
  top: 2px;
  width: 36px;
  height: 288px;
  margin: 0 2px;
}
</style>
